<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/Dashboard1.css">
    <link rel="stylesheet" href="css/zqficonfont.css">
    <link rel="shortcut icon" href=" img/admin-logo-dark.png" />
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>Ample Admin Template - The Ultimate Multipurpose admin template</title>
</head>
<body>
<!--header-->
	<nav>
        <div class="nav_1">
            <div class="nav_img">
                <img src="img/logo.png"/>
                <img src="img/text.png"/>
            </div>
        </div>
        <ul class="nav_ul">
            <li>
                <i class="iconfont icon-youjian-copy"></i>
                <ul class="nav_ul_1">
                    <li>You Have 4 New Message</li>
                    <li>
                        <img src="img/varun2.jpg"/>
                        <span>Pavan Kumar</span>
                        <p>9:30 AM</p>
                    </li>
                    <li>
                        <img src="img/varun3.jpg"/>
                        <span>Hritik Roshan</span>
                        <p>9:20 AM</p>
                    </li>
                    <li>
                        <img src="img/varun4.jpg"/>
                        <span>Pwandeep rajan</span>
                        <p>9:10 AM</p>
                    </li>
                    <li>
                        <img src="img/varun5.jpg"/>
                        <span>John Abraham</span>
                        <p>9:40 AM</p>
                    </li>
                    <li>Sell all notifications</li>
                </ul>
            </li>
            <li>
                <i class="iconfont icon-duihao"></i>
                <div class="nav_ul_2"><img src="img/nav_ul_2.png"/></div>
            </li>
            <li><i>Mega</i></li>
        </ul>
        <div class="nav_user">
            <img class="nav_userimg" src="img/varun.jpg">
            <h3>Steave</h3>
            <div class="nav_arror"></div>
        </div>
        <div class="nav_input">
            <input type="text" placeholder="Search..."/>
            <img src="img/bigmirror.png"/>
        </div>
    </nav>
<!--nav-->
<!--左边侧栏-->
    <div class="content">
        <aside>
            <ul class="aside_ul">
                <li><i class="iconfont icon-houtai1"></i><span>Navigation</span></li>
                <li class="libox">
                    <img class="nav_userimg" src="img/varun.jpg">
                    <span>Steve Gection</span>
                    <b></b>
                </li>
                <li class="dom">
                    <a href="baipengfei.html"><h3>A</h3><h5>Baipengfei</h5></a>
                    <a href="Dashboard1.html"><h3>B</h3><h5>Zhangqifan</h5></a>
                    <a href="Dashboard3.html"><h3>C</h3><h5>Yangxu</h5></a>
                    <a href="chart.html"><h3>D</h3><h5>Liusaisai</h5></a>
                    <a href="user_card.html"><h3>E</h3><h5>Zhangyifan</h5></a>
                    <a href="UI Elements.html"><h3>F</h3><h5>Jingjing</h5></a>
                    <a href="panels-wells.html"><h3>G</h3><h5>Liudan</h5></a>
                </li>
                <li class="libox"><i class="iconfont icon-houtaiguanli"></i><span>Dash Board</span></li>
                <li class="libox"><i class="iconfont icon-youjian-copy"></i><span>eCommerce</span><b></b></li>
                <li class="libox"><i class="iconfont icon-houtai-huojian"></i><span>UI Elements</span></li>
                <li class="libox"><i class="iconfont icon-houtai-rili"></i><span>Sample Pages</span></li>
                <li class="libox"><i class="iconfont icon-houtai-pingjia"></i><span>Apps</span><b></b></li>
                <li class="libox"><i class="iconfont icon-houtaiguanli1"></i><span>Forms</span><b></b></li>
                <li class="libox"><i class="iconfont icon-houtai_shuju"></i><span>Tables</span></li>
                <li class="libox"><i class="iconfont icon-bangzhuguanli"></i><span>Charts</span><b></b></li>
                <li class="libox"><i class="iconfont icon-houtaiguanli2"></i><span>Wid Gets</span></li>
                <li class="libox"><i class="iconfont icon-houtai_anxia"></i><span>Icons</span></li>
                <li class="libox"><i class="iconfont icon-houtaiweihu"></i><span>Google Map</span><b></b></li>
                <li class="libox"><i class="iconfont icon-back-password"></i><span>Calender</span></li>
                <li class="libox"><i class="iconfont icon-proscenium"></i><span>Gallern</span><b></b></li>
            </ul>
        </aside>
    </div>
    <!--右边侧边栏-->
    <div class="Bright">
        <div class="Bright_1">
            <span>SERVICE PANEL</span>
            <span class="Bright_1_1">×</span>
        </div>
        <div class="Bright_2">
            <div class="Bright_2_1">
                <h3>With Light sidebar</h3>
                <div class="Bright_2_1_1">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <div class="Bright_2_2">
                <h3>With Dark sidebar</h3>
                <div class="Bright_2_2_1">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            <div class="Bright_2_3">
                <h3>Chat option</h3>
                <ul class="Bright_2_3_1">
                    <li>
                        <a href="#">
                            <img src="img/varun.jpg"/>
                            <span>
                                Varun Dhavan
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun2.jpg"/>
                            <span>
                                GeneLia Deshmukh
                                <small class="text-success other1">Away</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun3.jpg"/>
                            <span>
                                Ritesh Deshmukh
                                <small class="text-success other2">Bush</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun4.jpg"/>
                            <span>
                                Arijit Sinh
                                <small class="text-success other3">Offline</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun5.jpg"/>
                            <span>
                                Govinda Star
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun6.jpg"/>
                            <span>
                                John Abraham
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun7.jpg"/>
                            <span>
                                Hritik Roshan
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/varun8.jpg"/>
                            <span>
                                Pwandeep rajan
                                <small class="text-success">online</small>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<!--页面-->
 <!--头部-->
    <div class="Bheader">
        <div class="Bheader_1">
            <div class="Bheader_2">DASHBOARD 1</div>
            <div class="Bheader_3">
                    <span class="Bheader_4">Dashboard &nbsp;&nbsp;&nbsp;/</span>
                    <span class="Bheader_5">Dashboard 1</span>
                    <button>Buy Admin Now</button>
                    <div class="Bheader_6"><img src="img/yuan.png"/></div>
            </div>
        </div>
    </div>
<div class="contentall">
    <!--<div class="c_title">-->
        <!--<h4>DASHBOARD1</h4>-->
        <!--<div class="title_right">-->
            <!--<span class="right_first">Dashboard / </span>-->
            <!--<span class="right_second">Dashboard 1 </span>-->
            <!--<button class="btn1">Buy Admin Now</button>-->
            <!--<span class="right_third"><i class="iconfont icon-set"></i></span>-->
        <!--</div>-->
    <!--</div>-->
    <ul class="c_col_1">
        <li>
            <div class="col_1_firstdiv"><i class="iconfont icon-text"></i></div>
            <div>
                <h4>New Projects</h4>
                <span class="outspan"><span class="inspan"></span></span>
            </div>
            <h3>23</h3>
        </li>
        <li>
            <div class="col_1_firstdiv"><i class="iconfont icon-cloud-wallet"></i></div>
            <h4>New Projects</h4>
            <span class="outspan"><span class="inspan"></span></span>
            <h3>23</h3>
        </li>
        <li>
            <div class="col_1_firstdiv"><i class="iconfont icon-cart-copy"></i></div>
            <h4>New Projects</h4>
            <span class="outspan"><span class="inspan"></span></span>
            <h3>23</h3>
        </li>
        <li>
            <div class="col_1_firstdiv"><i class="iconfont icon-tubiaozhizuomoban"></i></div>
            <h4>New Projects</h4>
            <span class="outspan"><span class="inspan"></span></span>
            <h3>23</h3>
        </li>
    </ul>
    <div class="products1">
        <h3>PRODUCTS YEARLY SALES</h3>
        <span></span>
        <span>Mac</span>
        <span></span>
        <span>Winodows</span>
        <img src="img/1.png">
    </div>
    <div class="products2">
        <img src="img/211112.png">
        <div class="products_box">
            <h2>Week Sales</h2>
            <h5>Ios app - 160 sales</h5>
            <div class="col_1_firstdiv"><i class="iconfont icon-cart-copy"></i></div>
        </div>
    </div>
    <div class="products3">
        <div class="products3_box">
            <i class="iconfont icon-cloudsun"></i>
            <h1>35<sup>o</sup></h1>
            <h4>Clear and sunny</h4>
            <img src="img/33333333333.png">
            <span>05 AM</span>
            <span>10 AM</span>
            <span>03 AM</span>
            <span>08 AM</span>
        </div>
        <div class="products_box">
            <h2>Sunday</h2>
            <h5>March 2017</h5>
            <div class="col_1_firstdiv"><i class="iconfont icon-Sun"></i></div>
        </div>
    </div>
    <div class="selectFirst">
        <ul class="selectFirst1">
            <li>
                <i class="iconfont icon-user1"></i>
                <p>SELECT USERS</p>
            </li>
            <li>
                <i class="iconfont icon-ziyuan"></i>
                <p>SELECT USERS</p>
            </li>
            <li>
                <i class="iconfont icon-message"></i>
                <p>SELECT USERS</p>
            </li>
            <li>
                <i class="iconfont icon-finish-Prompt"></i>
                <p>SELECT USERS</p>
            </li>
        </ul>
        <div class="selectFirst2">
            <h3>Select Users to Manage</h3>
            <div class="selectFirst2_right">
                <span><i class="iconfont icon-plus"></i></span>
                <span>Add Users</span>
                <span><i class="iconfont icon-edit-2"></i></span>
                <span>Edit</span>
            </div>
        </div>
        <dl>
            <dt>
                <span>NAME</span>
                <span>POSITION</span>
                <span>JOINED</span>
                <span>LOCATION</span>
            </dt>
            <dd>
                <span>
                    <span class="allcicle"><span class="clickcicle">√</span></span>
                    <img src="img/95.jpg">
                    <p>Hanna Gover</p>
                </span>
                <span>Admin</span>
                <span>13 Jan 2005</span>
                <span>Texas, United states</span>
            </dd>
            <dd>
                <span>
                    <span class="allcicle"><span class="clickcicle">√</span></span>
                    <img src="img/95.jpg">
                    <p>Hanna Gover</p>
                </span>
                <span>Admin</span>
                <span>13 Jan 2005</span>
                <span>Texas, United states</span>
            </dd>
            <dd>
                <span>
                    <span class="allcicle"><span class="clickcicle">√</span></span>
                    <img src="img/95.jpg">
                    <p>Hanna Gover</p>
                </span>
                <span>Admin</span>
                <span>13 Jan 2005</span>
                <span>Texas, United states</span>
            </dd>
            <dd>
                <span>
                    <span class="allcicle"><span class="clickcicle">√</span></span>
                    <img src="img/95.jpg">
                    <p>Hanna Gover</p>
                </span>
                <span>Admin</span>
                <span>13 Jan 2005</span>
                <span>Texas, United states</span>
            </dd>
            <div class="dllast">
                <h3>1 members selected</h3>
                <div class="next">Next<i class="iconfont icon-plus"></i></div>
            </div>
        </dl>
    </div>
    <div class="selectSecond">
        <div class="cicle"><i class="iconfont icon-plus"></i></div>
        <h1>$458.50</h1>
        <h5>Your  wallet  Banalce</h5>
        <img src="img/44444434444.png">
        <ul>
            <li>
                <i class="iconfont icon-bag_icon"></i>
                <span>Withdrow money</span>
            </li>
            <li>
                <i class="iconfont icon-bag_icon"></i>
                <span>Withdrow money</span>
            </li>
            <li>
                <i class="iconfont icon-bag_icon"></i>
                <span>Withdrow money</span>
            </li>
            <li>
                <i class="iconfont icon-bag_icon"></i>
                <span>Withdrow money</span>
            </li>
            <li>
                <i class="iconfont icon-bag_icon"></i>
                <span>Withdrow money</span>
            </li>
            <li>
                <i class="iconfont icon-bag_icon"></i>
                <span>Withdrow money</span>
            </li>
        </ul>
    </div>
    <div class="Danielleft">
        <img src="img/88.jpg">
        <ul class="firstul">
            <li>Daniel Kristeen</li>
            <li>UIUX Designer</li>
            <li><i class="iconfont icon-plus"></i>FOLLOW</li>
        </ul>
        <ul class="secondul">
            <li>
                <p>14</p>
                <p>PHOTOS</p>
            </li>
            <li>
                <p>14</p>
                <p>PHOTOS</p>
            </li>
            <li>
                <p>14</p>
                <p>PHOTOS</p>
            </li>
        </ul>
        <div class="thirddiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
        <dl class="fourthdl">
            <dt>Followers</dt>
            <dd><img src="img/88.jpg"></dd>
            <dd><img src="img/88.jpg"></dd>
            <dd><img src="img/88.jpg"></dd>
            <dd><span>5 <i class="iconfont icon-plus"></i></span></dd>
        </dl>
        <ul class="fifthul">
            <li><i class="iconfont icon-globe"></i></li>
            <li><i class="iconfont icon-bird"></i></li>
            <li><i class="iconfont icon-facebookicon"></i></li>
            <li><i class="iconfont icon-youtube-copy"></i></li>
            <li><i class="iconfont icon-in"></i></li>

        </ul>
    </div>
    <div class="Danielright">
        <div class="manage">MANAGE USERS</div>
        <dl>
            <dt>
                <span>#</span>
                <span>NAME</span>
                <span>OCCUPATION</span>
                <span>EMAIL</span>
                <span>CATEGORY</span>
                <span>MANAGE</span>
            </dt>
            <dd>
                <span>1</span>
                <span>
                    Daniel Kristeen <br/>
                    Texas, Unitedd states
                </span>
                <span>
                    Visual Designer <br/>
                    Past : teacher
                </span>
                <span>
                    daniel@website.com <br/>
                    999 - 444 - 555
                </span>
                <span>
                    <select name="" id="">
                        <option>Moulater</option>
                        <option>Admin</option>
                        <option>User</option>
                        <option>Haha</option>
                    </select>
                </span>
                <span>
                    <span class="circle"><i class="iconfont icon-lajitong"></i></span>
                    <span class="circle"><i class="iconfont icon-edit-2"></i></span>
                </span>

            </dd>
            <dd>
                <span>2</span>
                <span>
                    Daniel Kristeen <br/>
                    Texas, Unitedd states
                </span>
                <span>
                    Visual Designer <br/>
                    Past : teacher
                </span>
                <span>
                    daniel@website.com <br/>
                    999 - 444 - 555
                </span>
                <span>
                    <select name="" id="">
                        <option>Moulater</option>
                        <option>Admin</option>
                        <option>User</option>
                        <option>Haha</option>
                    </select>
                </span>
                <span>
                    <span class="circle"><i class="iconfont icon-lajitong"></i></span>
                    <span class="circle"><i class="iconfont icon-edit-2"></i></span>
                </span>

            </dd>
            <dd>
                <span>3</span>
                <span>
                    Daniel Kristeen <br/>
                    Texas, Unitedd states
                </span>
                <span>
                    Visual Designer <br/>
                    Past : teacher
                </span>
                <span>
                    daniel@website.com <br/>
                    999 - 444 - 555
                </span>
                <span>
                    <select name="" id="">
                        <option>Moulater</option>
                        <option>Admin</option>
                        <option>User</option>
                        <option>Haha</option>
                    </select>
                </span>
                <span>
                    <span class="circle"><i class="iconfont icon-lajitong"></i></span>
                    <span class="circle"><i class="iconfont icon-edit-2"></i></span>
                </span>

            </dd>
            <dd>
                <span>4</span>
                <span>
                    Daniel Kristeen <br/>
                    Texas, Unitedd states
                </span>
                <span>
                    Visual Designer <br/>
                    Past : teacher
                </span>
                <span>
                    daniel@website.com <br/>
                    999 - 444 - 555
                </span>
                <span>
                    <select name="" id="">
                        <option>Moulater</option>
                        <option>Admin</option>
                        <option>User</option>
                        <option>Haha</option>
                    </select>
                </span>
                <span>
                    <span class="circle"><i class="iconfont icon-lajitong"></i></span>
                    <span class="circle"><i class="iconfont icon-edit-2"></i></span>
                </span>

            </dd>
            <dd>
                <span>5</span>
                <span>
                    Daniel Kristeen <br/>
                    Texas, Unitedd states
                </span>
                <span>
                    Visual Designer <br/>
                    Past : teacher
                </span>
                <span>
                    daniel@website.com <br/>
                    999 - 444 - 555
                </span>
                <span>
                    <select name="" id="">
                        <option>Moulater</option>
                        <option>Admin</option>
                        <option>User</option>
                        <option>Haha</option>
                    </select>
                </span>
                <span>
                    <span class="circle"><i class="iconfont icon-lajitong"></i></span>
                    <span class="circle"><i class="iconfont icon-edit-2"></i></span>
                </span>

            </dd>
            <dd>
                <span>6</span>
                <span>
                    Daniel Kristeen <br/>
                    Texas, Unitedd states
                </span>
                <span>
                    Visual Designer <br/>
                    Past : teacher
                </span>
                <span>
                    daniel@website.com <br/>
                    999 - 444 - 555
                </span>
                <span>
                    <select name="" id="">
                        <option>Moulater</option>
                        <option>Admin</option>
                        <option>User</option>
                        <option>Haha</option>
                    </select>
                </span>
                <span>
                    <span class="circle"><i class="iconfont icon-lajitong"></i></span>
                    <span class="circle"><i class="iconfont icon-edit-2"></i></span>
                </span>

            </dd>
            <dd>
                <span>7</span>
                <span>
                    Daniel Kristeen <br/>
                    Texas, Unitedd states
                </span>
                <span>
                    Visual Designer <br/>
                    Past : teacher
                </span>
                <span>
                    daniel@website.com <br/>
                    999 - 444 - 555
                </span>
                <span>
                    <select name="" id="">
                        <option>Moulater</option>
                        <option>Admin</option>
                        <option>User</option>
                        <option>Haha</option>
                    </select>
                </span>
                <span>
                    <span class="circle"><i class="iconfont icon-lajitong"></i></span>
                    <span class="circle"><i class="iconfont icon-edit-2"></i></span>
                </span>

            </dd>
        </dl>
    </div>
    <div class="this">
        <div class="this-top">
            <h5>This months task</h5><br/>
            <h3>TO-DO LIST</h3>
            <span class="add">Add Task</span>
        </div>
        <ul class="this-ul">
            <li>
                <span class="square"><span class="squarein">√</span></span>
                <span>Schedule meeting with</span>
                <div>
                    <img src="img/16.jpg">
                    <img src="img/17.jpg">
                    <img src="img/22.jpg">
                    <img src="img/27.jpg">
                </div>

            </li>
            <li>
                <span class="square"><span class="squarein">√</span></span>
                <span>Give  Purchase report to</span>
                <span class="today">today</span>
                <div>
                    <img src="img/28.jpg">
                    <img src="img/30.jpg">
                </div>
            </li>
            <li>
                <span class="square"><span class="squarein">√</span></span>
                <span>Book flight for holiday</span>
                <div>
                    26 jun 2017
                </div>

            </li>
            <li>
                <span class="square"><span class="squarein">√</span></span>
                <span>Forward all tasks</span>
                <span class="today" style="background-color:#ffc36d">2 weeks</span>
                <div>
                    26 jun 2017
                </div>

            </li>
            <li>
                <span class="square"><span class="squarein">√</span></span>
                <span>Recieve shipment</span>
                <div>
                    26 jun 2017
                </div>

            </li>
            <li>
                <span class="square"><span class="squarein">√</span></span>
                <span>Improtant tasks</span>
                <span class="today" style="background-color: #53e69d">2 weeks</span>
                <div>
                    <img src="img/38.jpg">
                    <img src="img/40.jpg">
                    <img src="img/70.jpg">

                </div>

            </li>

        </ul>
    </div>
    <div class="october">
        <div class="octobertop">
            <div>
                <button><</button>
                <button>></button>
                <span class="today">Today</span>

            </div>
            <h2>OCTOBER 2017</h2>
            <div>
                <button>Month</button>
                <button>Week</button>
                <button>Day</button>
            </div>

        </div>
        <div class="thead">
            <span>SUN</span>
            <span>MON</span>
            <span>TUE</span>
            <span>WED</span>
            <span>THU</span>
            <span>FRI</span>
            <span>SAT</span>
        </div>
        <table class="calendar">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
            </tr>
            <tr>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
            </tr>
            <tr>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
            </tr>
            <tr>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
        </table>
    </div>

    <div class="readall">
        <div class="read">
            <img src="img/img1.jpg">
            <div class="readbottom">
                <i class="iconfont icon-rili"></i>
                <span>May 16</span>
                <i class="iconfont icon-xinxin"></i>
                <span>38</span>
                <h3>Top 20 Models are on the ramp</h3>
                <p>Titudin venenatis ipsum ac feugiat. Vestibulum ullamcorper quam.</p>
                <div class="lastread">Read More</div>
            </div>
        </div>
        <div class="read">
            <img src="img/img2.jpg">
            <div class="readbottom">
                <i class="iconfont icon-rili"></i>
                <span>May 16</span>
                <i class="iconfont icon-xinxin"></i>
                <span>38</span>
                <h3>Top 20 Models are on the ramp</h3>
                <p>Titudin venenatis ipsum ac feugiat. Vestibulum ullamcorper quam.</p>
                <div class="lastread">Read More</div>
            </div>
        </div>
        <div class="read">
            <img src="img/img3.jpg">
            <div class="readbottom">
                <i class="iconfont icon-rili"></i>
                <span>May 16</span>
                <i class="iconfont icon-xinxin"></i>
                <span>38</span>
                <h3>Top 20 Models are on the ramp</h3>
                <p>Titudin venenatis ipsum ac feugiat. Vestibulum ullamcorper quam.</p>
                <div class="lastread">Read More</div>
            </div>
        </div>
        <div class="read">
            <img src="img/img4.jpg">
            <div class="readbottom">
                <i class="iconfont icon-rili"></i>
                <span>May 16</span>
                <i class="iconfont icon-xinxin"></i>
                <span>38</span>
                <h3>Top 20 Models are on the ramp</h3>
                <p>Titudin venenatis ipsum ac feugiat. Vestibulum ullamcorper quam.</p>
                <div class="lastread">Read More</div>
            </div>
        </div>
    </div>
    <div class="chat">
        <h1 class="chattop">CHAT LISTING</h1>
        <ul class="chatbottom">
            <li>
                <img src="img/100.jpg" alt="">
                <span>Varun Dhavan</span>
                <span class="online">online</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
            <li>
                <img src="img/88.jpg" alt="">
                <span>Genelia Deshmukh</span>
                <span class="online" style="color: #ffc36d;">away</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
            <li>
                <img src="img/89.jpg" alt="">
                <span>Ritesh Deshmukh</span>
                <span class="online" style="color: #ff7676;">Busy</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
            <li>
                <img src="img/91.jpg" alt="">
                <span>Varun Dhavan</span>
                <span class="online" style="color: #96a2b4;">Offline</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
            <li>
                <img src="img/92.jpg" alt="">
                <span>Govinda Star</span>
                <span class="online">online</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
            <li>
                <img src="img/95.jpg" alt="">
                <span>John  Abraham</span>
                <span class="online">online</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
            <li>
                <img src="img/98.jpg" alt="">
                <span>Varun Dhavan</span>
                <span class="online">online</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
            <li>
                <img src="img/102.jpg" alt="">
                <span>Varun Dhavan</span>
                <span class="online">online</span>
                <span class="circleall">
                    <span class="circle circle1"><i class="iconfont icon-dianhua"></i></span>
                    <span class="circle circle2"><i class="iconfont icon-message1"></i></span>
                </span>

            </li>
        </ul>
    </div>
    <div class="user">
        <h1 class="usertop">USER ACTIVITY</h1>
        <ul class="userbottom">
            <li>
                <div class="circle"><i class="iconfont icon-user1"></i></div>
                <p>Tohnathan Doe 5 minutes ago</p>
                <p>Contrary to popular belief</p>
            </li>
            <li>
                <div class="circle" style="background-color:#2cabe3"><i class="iconfont icon-tupian"></i></div>
                <p>Hritik Roshan 5 minutes ago</p>
                <p>Lorem Ipsum is simply dummy</p>
                <img src="img/70.jpg">
                <img src="img/40.jpg">
                <img src="img/38.jpg">
            </li>
            <li>
                <div class="circle"><img src="img/30.jpg" alt=""></div>
                <p>Tohnathan Doe 5 minutes ago</p>
                <p>Contrary to popular belief</p>
            </li>
            <li>
                <div class="circle"><img src="img/38.jpg" alt=""></div>
                <p>Tohnathan Doe 5 minutes ago</p>
                <p>Contrary to popular belief</p>
            </li>
            <li>
                <div class="circle"><img src="img/100.jpg" alt=""></div>
                <p>Tiger Sroff 5 minutes ago</p>
                <p>The generated lorem ipsum </p>
                <span class="last apporve">Apporve</span>
                <span class="last refuse">Refuse</span>
            </li>
        </ul>

    </div>
    <div class="chatbox">
        <h3 class="chatboxtop">CHATBOX</h3>
        <ul class="chatboxcenter">
            <li>
                <img src="img/88.jpg" alt="">
                <span class="text1">
                <p>Sonu Nigam</p>
                <p>Hi, All!</p>
                <p>10.00 am</p>
                </span>
            </li>
            <li>
                <span class="text2">
                    <p>Genelia</p>
                    <p>Hi, How are you Sonu? </p>
                    <p>ur next concert?</p>
                    <p>10.03 am</p>
                </span>
                    <img src="img/83.jpg" alt="">

            </li>
            <li>
                <img src="img/88.jpg" alt="">
                <span class="text1">
                <p>Sonu Nigam</p>
                <p>Hi, All!</p>
                <p>10.00 am</p>
                </span>
            </li>
            <li>
                <span class="text2">
                    <p>Genelia</p>
                    <p>Hi, How are you Sonu? </p>
                    <p>ur next concert?</p>
                    <p>10.03 am</p>
                </span>
                <img src="img/83.jpg" alt="">

            </li>


        </ul>
        <div class="chatboxbottom">
            <span>Type  your message here</span>
            <span class="plane"><i class="iconfont icon-zhifeiji"></i></span>
        </div>
    </div>
</div>
<footer>2017 © Ample Admin brought to you by themedesigner.in</footer>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/Dashboard1.js"></script>